<template>
    <div :id="chartId" class="chart-box"></div>
</template>

<script>
  export default {
    data () {
      return {
        loading: false,
      }
    },
    props:{
      chartData:{
        default:function(){return {}},
        type:Object
      },
      index:{
        default: function(){return  0},
        type:Number
      }
    },
    activated(){
      if (this.chartPie) {
        this.chartPie.resize()
      }
    },
    mounted(){
      this.initChartPie(this.chartData);
    },
    methods: {
      // 饼状图
      initChartPie (data) {
        let data2 = [];
        data.list.forEach(x=>{
          data2.push({value: x.count,  name: x.projectName});
        });
        this.realName = data.realName;
        let option = {
          /*backgroundColor: '#2c343c',*/
          title: {
            text: this.realName + '-项目日志统计',
            subtext: (new Date()).getFullYear() + '年',
            left: 'center',
            top: 20,
            textStyle: {
              color: '#ccc'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          toolbox: {
            show : true,
            feature : {
              mark : {show: true},
              dataView : {show: true, readOnly: false},
              magicType : {
                show: true,
                type: ['pie', 'funnel']
              },
              restore : {show: true},
              saveAsImage : {show: true}
            }
          },
          calculable : true,
          series : [
            {
              name:'项目时间占比',
              type:'pie',
              /*radius : [30, 110],*/
              center : ['50%', '60%'],
              /*roseType : 'area',*/
              data:data2
            }
          ]
        }
        console.log('chartId:'+this.chartId)
        this.chartPie = echarts.init(document.getElementById(this.chartId))
        this.chartPie.setOption(option)
        window.addEventListener('resize', () => {
          this.chartPie.resize()
        })
      },
    },
    computed: {
      chartId:{
        get(){
          return 'chart'+ this.index
        }
      },
    }
  }
</script>
<style scoped>
  .chart-box {
    min-height: 400px;
    max-width: 100%;
    width:600px;
    height:400px;
    float:left;
  }
</style>
